<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body {
            background-color: gainsboro;
        }

        #app {
            width: 320px;
            height: 400px;
            background-color: #fff;
            margin: 100px auto;
        }
        .top{
            height: 40px;
            display: flex;
            padding: 0 16px;
            justify-content: space-between;
            align-items: center;
            /* background-color: red; */
        }
        .title{
            font-weight: 700;
        }
        .empty{
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
        }
        .list{
            height: 310px;
            overflow-y: auto;
            padding: 0 16px;
            /* background-color: aquamarine; */
        }
        .item{
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* background-color: yellow; */
        }
        .left{
            width: 80px;
            height: 80px;
            border: 1px solid gainsboro;
            margin-right: 10px;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .middle{
            flex: 1;
            line-height: 60px;
        }
        .name{
            font-size: 14px;
            font-weight: 700;
        }
        .unitPrice{
            color: red;
            font-size: 12px;
        }
        .price{
            font-size: 14px;
        }
        .ori_price{
            text-decoration: line-through;
            color: gainsboro;
        }
        .right{
            align-self: flex-end;
            display: flex;
            margin-bottom: 10px;
        }
        .jian,.add{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            color: #00a6ff;
            border: 1px solid #00a6ff;
            margin: 0 10px;
            cursor: pointer;
        }
        .add{
            margin-right: 0;
            color: #fff;
            background-color: #00a6ff;
        }
        .none{
            color: red;
            text-align: center;
            line-height: 40px;
        }
        .bottom{
            height: 50px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.742);
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .jiage{
            font-size: 12px;
        }
        .totalPrice{
            font-size: 16px;
        }
        .ori_totalPrice{
            color: gainsboro;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="top">
            <span class="title">已选商品</span>
            <span class="empty" @click="empty">清空</span>
        </div>
        <div class="list">
            <div class="item" v-for="(item,index) in tasklist" :key="index">
                <div class="left">
                    <img :src="item.pic" alt="">
                </div>
                <div class="middle">
                    <div class="name">{{item.name}}</div>
                    <div class="unitPrice">
                        ￥<span class="price">{{item.price}}</span>
                        <span class="ori_price">￥{{item.ori_price}}</span>
                    </div>
                </div>
                <div class="right">
                    <div class="jian" @click="jian(item)">-</div>
                    <div class="count">{{item.count}}</div>
                    <div class="add" @click="add(item)">+</div>
                </div>
                <div class="none" v-show="tasklist.length == 0">
                    购物车空空如也
                </div>
            </div>
        </div>
        <div class="bottom">
            <span>共<span class="total"> {{total}} </span>件</span>
            <span class="jiage">
                ￥<span class="totalPrice">{{totalPrice}}</span>
                <span class="ori_totalPrice">￥{{ori_totalPrice}}</span>
            </span>
        </div>
    </div>
</body>

</html>
<script src="./js/vue-2.5.21.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: {
            tasklist: [
                { id: 1, pic: './img/pic4.png', name: '秋刀鱼/斤', price: '35.00', ori_price: 36, count: 1 },
                { id: 2, pic: './img/pic5.png', name: '鲜大带鱼/条', price: '45.00', ori_price: 46, count: 1 },
                { id: 3, pic: './img/pic6.png', name: '鲜活全母皮皮虾/斤', price: '85.00', ori_price: 86, count: 1 },
            ],
        },
        methods: {
            empty(){
                this.tasklist=''
            },
            jian(item){
                if (item.count>1) {
                    item.count--
                }
            },
            add(item){
                if (item.count<5) {
                    item.count++
                }
            },
        },
        computed: {
            total(){
                if (this.tasklist.length) {
                    return this.tasklist.reduce((prev,item)=>{return prev+item.count},0)
                } else {
                    return 0
                } 
            },
            totalPrice(){
                if (this.tasklist.length) {
                    return this.tasklist.reduce((prev,item)=>{return prev+item.price*item.count},0)
                } else {
                    return 0
                } 
            },
            ori_totalPrice(){
                if (this.tasklist.length) {
                    return this.tasklist.reduce((prev,item)=>{return prev+item.ori_price*item.count},0)
                } else {
                    return 0
                } 
            }
        }
    })
</script>